<template>
  <div class="bg">
    <topNav :txt="txt"></topNav>
    <div class="main">
      <div class="list" v-for="(item, index) in list" :key="index">
        <span>{{ item.title }}</span>
        <input type="text" @blur="vifp(index)" v-model="item.value" />
      </div>
      <div class="tip">上传证件图片</div>
      <div class="main_img">
        <div class="img_box" v-for="(item, index) in listImg" :key="index">
          <span v-if="item.imgsrc == ''">{{ item.text }}</span>
          <input
            type="file"
            class="input_img"
            accept="image/*"
            @change="getImg($event, index)"
          />
          <img :src="item.imgsrc" alt="" class="box_img" v-if="item.imgsrc" />
          <!-- <img src="../../../static/images/me/camera.jpeg" alt="" v-if="index ==3"> -->
        </div>
      </div>
    </div>
    <div class="buttom_t">
      <van-button type="primary" size="large">提交申请</van-button>
    </div>
  </div>
</template>
<script>
import topNav from "@/components/return";
export default {
  components: {
    topNav,
  },
  data() {
    return {
      txt: "注册公司",
      list: [
        { title: "企业名称", value: "" },
        { title: "企业代码", value: "" },
        { title: "公司地址", value: "" },
        { title: "法人", value: "" },
        { title: "公司电话", value: "" },
      ],
      listImg: [
        { text: "公司营业执照", imgsrc: "" },
        { text: "银行开启许可证", imgsrc: "" },
        { text: "法人身份证件正面照", imgsrc: "" },
        { text: "法人身份证件反面照", imgsrc: "" },

        //   {text:'个人证件反面照'},
        //   {text:''}
      ],
    };
  },
  methods: {
    vifp(index) {
      if (index == 4) {
        let phon = this.list[index].value;
        if (!/^1[3456789]\d{9}$/.test(phon)) {
          this.$dialog
            .alert({
              title: "号码不正确，请重新输入",
            })
            .then(() => {
              // on close
            });
          return false;
        }
      }
    },
    getImg(event, index) {
      let that = this;

      let files = event.target.files[0];

      //创建读取文件的对象
      var file = new FileReader(); //文件读取
      //分析文件对象
      file.readAsDataURL(files);
      //文件加载成功
      file.onload = function (e) {
        console.log("这是======》", this.result); /*获取bese路径*/
        if (/image/.test(this.result)) {
          //或者 e.targin.result
          console.log("ndfnfn");

          that.listImg[index].imgsrc = this.result;
          //  that.$set(that.list,index,that.list[index])
          //  console.log(that.list)
        }
      };
    },
  },
};
</script>
<style  scoped>
.bg {
  min-height: 100vh;
  background: #eee;
}
.main {
  background: #fff;
}
.list {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 50px;
  border-bottom: 1px solid #eee;
}
.list span {
  width: 80px;
  text-align: center;
}
.list input {
  width: 60%;
  border: none;
  outline: none;
}
.tip {
  color: #cccccc;
  margin-left: 24px;
}
.main_img {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.img_box {
  position: relative;
  width: 40%;
  margin: 0 2% 2% 0;
  height: 60px;
  border: 1px dashed #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cccccc;
  font-size: 14px;
}
/* .img_box img{
    width: 40px;
    height: 40px;
} */
.buttom_t {
  margin: 50px 20px;
}
.input_img {
  position: absolute;
  width: 95%;
  height: 95%;
  opacity: 0;
}
.box_img {
  position: absolute;
  width: 95%;
  height: 95%;
}
</style>